<template>
	<v-content ref="content">
		<div class="header padding" @click="toPage('/pages/mine/personalInfo', { type: 0 })">
			<div class="avatar">
				<image class="image" :src="getUserInfo.avatar" mode="aspectFill"></image>
				<image class="edit" src="/static/image/mine/icon-edit.png"></image>
			</div>
			<div class="detail">
				<div class="title">
					{{ getUserInfo.nickName }}
					<div v-if="getUserInfo.gender == '2'" class="gender-icon gender-female"></div>
					<div v-else-if="getUserInfo.gender == '1'" class="gender-icon gender-male"></div>
				</div>
				<div class="message">账号：{{ getUserInfo.phone.replace(getUserInfo.phone.slice(3, 7), "****") }}</div>
				<div class="bio" v-if="getUserInfo.remark && getUserInfo.remark.trim()">简介：{{ getUserInfo.remark }}
				</div>
			</div>
		</div>

		<div class="menu padding">
			<div class="item" @click="toExam(0)">
				<image class="image" mode="aspectFit" src="/static/image/mine/tab-1.png"></image>
				我的待考
			</div>
			<div class="item" @click="toExam(1)">
				<image class="image" mode="aspectFit" src="/static/image/mine/tab-2.png"></image>
				我的已考
			</div>
			<div class="item" @click="toPage('/pages/mine/study', { current: 0 })">
				<image class="image" mode="aspectFit" src="/static/image/mine/tab-3.png"></image>
				我的学习
			</div>
			<div class="item" @click="toPage('/pages/mine/study', { current: 1 })">
				<image class="image" mode="aspectFit" src="/static/image/mine/tab-4.png"></image>
				我的已学
			</div>
		</div>

		<div class="divider"></div>
		<div class="list arrow-right padding" @click="toPage('/pages/mine/collect')">
			<image class="image" src="/static/image/mine/list-1.png" mode="aspectFit"></image>
			<div class="title">我的收藏</div>
			<!-- <div class="dot"></div> -->
		</div>
		<div class="divider"></div>
		<div class="list arrow-right padding" @click="toExam(3)">
			<image class="image" src="/static/image/mine/list-2.png" mode="aspectFit"></image>
			<div class="title">题库学习</div>
			<!-- <div class="dot"></div> -->
		</div>
		<div class="divider2"></div>
		<div class="list arrow-right padding" @click="toPage('/pages/mine/feedback')">
			<image class="image" src="/static/image/mine/list-3.png" mode="aspectFit"></image>
			<div class="title">意见反馈</div>
			<!-- <div class="dot"></div> -->
		</div>

		<div class="divider"></div>
		<div class="list arrow-right padding" @click="toPage('/pages/mine/setting')">
			<image class="image" src="/static/image/mine/list-4.png" mode="aspectFit"></image>
			<div class="title">设置</div>
			<!-- <div class="dot"></div> -->
		</div>
		<v-tabbar current="3"></v-tabbar>
	</v-content>
</template>

<script>
import mixins from "@/mixins"

export default {
	name: "mine",
	mixins: [mixins],
	data() {
		return {
			getUserInfo: "",
		}
	},
	computed: {},
	methods: {
		init() { },
		onshow() {
			this.getData()
		},
		getData() {
			this.getUserInfo = this.$store.state.user.userInfo
			console.log(this.getUserInfo);
		},
		toExam(current) {
			// window.sessionStorage.setItem("examCurrent", current)
			uni.setStorageSync("examCurrent", current)
			this.toPage("/pages/exam/index", "tabbar")
		},
	},
}
</script>

<style lang="scss" scoped>
.header {
	padding-top: 120rpx;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 365rpx;
		z-index: 1;
	}

	.avatar {
		width: 125rpx;
		height: 125rpx;
		position: relative;
		z-index: 2;
		margin-right: 44rpx;
		flex: none;

		.image {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 50%;
			border: 3px solid #fff;
		}

		.edit {
			position: absolute;
			bottom: -10rpx;
			right: -10rpx;
			width: 45rpx;
			height: 45rpx;
			display: block;
		}
	}

	.detail {
		position: relative;
		z-index: 2;

		.title {
			font-weight: 700;
			font-size: 36rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
		}

		.gender-icon {
			margin-left: 15rpx;
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			position: relative;
		}

		.gender-female {
			color: #ff69b4;

			&::before {
				content: "♀";
				font-size: 36rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.gender-male {
			color: #4169e1;

			&::before {
				content: "♂";
				font-size: 36rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.message {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
		}

		.bio {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 10rpx;
			word-break: break-all;
		}
	}
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-top: 40rpx;
	padding-top: 25rpx;

	.item {
		width: 25%;
		text-align: center;
		font-size: 28rpx;
		color: #555555;
		letter-spacing: 2rpx;
		padding-bottom: 25rpx;

		.image {
			width: 80rpx;
			height: 70rpx;
			display: block;
			margin: auto;
		}
	}
}

.divider {
	background: #eceef3;
	height: 10rpx;
}

.divider2 {
	background: #d5d5d5;
	margin-left: 70rpx;
	height: 2rpx;
}

.list {
	height: 125rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 32rpx;
	position: relative;

	.image {
		width: 40rpx;
		height: 35rpx;
		margin-right: 28rpx;
	}

	.dot {
		margin-left: auto;
		margin-right: 30rpx;
		border-radius: 50%;
		width: 15rpx;
		height: 15rpx;
		background: $danger;
		box-shadow: 0 0 0 6rpx rgba($danger, 0.25);
	}

	&::after {
		color: #4b4b4b;
		border-width: 4rpx;
		right: 30rpx;
	}
}
</style>
